<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>MonkeyCMS</title>
<link type="text/css" rel="stylesheet" href="statics/css/monkey.css"/>
<link type="text/css" rel="stylesheet" href="statics/css/frame.css"/>
<script type="text/javascript" src="statics/js/jquery.min.js"></script>
<script type="text/javascript" src="statics/js/prettify.js"></script>
<!--tabs-->
<script type="text/javascript" src="statics/js/jquery.idtabs.min.js"></script>
<script type="text/javascript" src="statics/js/monkey.js"></script>

</head>

<body>
<!--page_header-->
<div class="page_header">
	<h3>标签页</h3>
	<p>通用标签页，使用 <code><a href="http://www.sunsean.com/idTabs/" target="_blank">idTabs</a></code> JQuery组件</p>
</div>
<!--/page_header-->

<!--page_main-->
<div class="page_main">

<h4>通用标签页</h4>

<div class="u_tab">
    <ul class="u_tab_items">
        <li class="u_tab_item"><a href="#tab1" class="selected">标签一</a></li>
        <li class="u_tab_item"><a href="#tab2">标签二</a></li>
        <li class="u_tab_item"><a href="#tab3">标签三</a></li>
        <li class="u_tab_item"><a href="#tab4">标签四</a></li>
    </ul>
    <div id="tab1" style="display:block;">标签一内容</div>
    <div id="tab2" style="display:none;">标签二内容</div>
    <div id="tab3" style="display:none;">标签三内容</div>
    <div id="tab4" style="display:none;">标签四内容</div>
</div>
<script type="text/javascript">$(".u_tab ul").idTabs();</script>

<br />
<br />

<pre class="prettyprint linenums">
&lt;div class="u_tab"&gt;
  &lt;ul class="u_tab_items"&gt;
    &lt;li class="u_tab_item"&gt;&lt;a href="#tab1" class="selected"&gt;标签一&lt;/a&gt;&lt;/li&gt;
    &lt;li class="u_tab_item"&gt;&lt;a href="#tab2"&gt;标签二&lt;/a&gt;&lt;/li&gt;
    &lt;li class="u_tab_item"&gt;&lt;a href="#tab3"&gt;标签三&lt;/a&gt;&lt;/li&gt;
    &lt;li class="u_tab_item"&gt;&lt;a href="#tab4"&gt;标签四&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="tab1" style="display:block;"&gt;标签一内容&lt;/div&gt;
  &lt;div id="tab2" style="display:none;"&gt;标签二内容&lt;/div&gt;
  &lt;div id="tab3" style="display:none;"&gt;标签三内容&lt;/div&gt;
  &lt;div id="tab4" style="display:none;"&gt;标签四内容&lt;/div&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;$(".u_tab ul").idTabs();&lt;/script&gt;</pre>

<h4>通过修改样式，可改变外观</h4>

<pre class="prettyprint linenums">
/*默认样式*/
.u_tab { margin:0; padding:0;}

.u_tab ul { margin:0; padding:0; list-style:none;}
.u_tab li { position:relative; top:1px; vertical-align:top; list-style:none;}

.u_tab_items { border-bottom:1px solid #E5E5E5; font-size:14px;}
.u_tab_items_right { text-align:right;}

.u_tab_item { display:inline-block; *display:inline; *zoom:1; *margin-right:4px;}
.u_tab_item a { display:inline-block; *display:inline; *zoom:1; padding:0 10px; height:32px; line-height:32px; border:1px solid #E5E5E5; border-bottom:none; background:#FFF; color:#4D4D4D;}
.u_tab_item a:hover { background:#F6F6F6; text-decoration:none;}

a.selected { height:33px; font-weight:700;}
a.selected:hover { background:#FFF;}

/*修改样式*/
.u_tab li { top:0;}
.u_tab_items { border-bottom:2px solid #EF705B;}
.u_tab_item {}
.u_tab_item a { height:33px; line-height:33px; border:none; background:none; color:#999;}
.u_tab_item a:hover { background:#EF705B; color:#FFF;}

a.selected { background:#EF705B; color:#FFF;}
a.selected:hover { color:#FFF;}</pre>

</div>
<!--/page_main-->
</body>
</html>